<template>
  <div class="box">
    <div class="first" :style="firstStyle">
      <div v-for="item in firstList" :key="item" :style="style">
        <el-card v-if="item == 'YGDLB'">
          <div class="tip">
            <img src="@/assets/images/a-32-guidangshenpi.png" class="tip_icon" />
            <p>预归档待办</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="guidang" style="padding-left: 1%;" v-if="guidang.length > 0">
              <li v-for="item in yuguidangList" :key="item.instanceId" @click="handleJump('YGDLB', item)">
                {{ item.instanceName }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>
        <el-card v-if="item == 'WDJY'">
          <div class="tip">
            <img src="@/assets/images/card-tip4.png" class="tip_icon" />
            <p>我的借阅</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="sywdjyData.length > 0">
            <div id="myBorrow" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'WDSPJD'">
          <div class="tip">
            <img src="@/assets/images/card-tip5.png" class="tip_icon" />
            <p>我的审批进度</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="getProcessCountData.length > 0">
            <div id="myApproval" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'GLDAGDQKDB'">
          <div class="tip">
            <img src="@/assets/images/card-tip6.png" class="tip_icon" />
            <p>各类档案归档情况对比(年)</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="sygdqkData.length > 0">
            <div id="fileArchiving" style="width: 100%;height:100%;"></div>

          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'TZGG'">
          <div class="tip">
            <img src="@/assets/images/card-tip3.png" class="tip_icon" />
            <p>通知公告</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="notice" style="padding-left: 1%;" v-if="notice.length > 0">
              <li v-for="item in notice" :key="item.noticeId" @click="handleJump('TZGG', item)">
                {{ item.title }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>

        <el-card v-if="item == 'DBJY'">
          <div class="tip">
            <img src="@/assets/images/a-32-jieyuedaiban.png" class="tip_icon" />
            <p>借阅待办</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="borrow" style="padding-left: 1%;" v-if="borrow.length > 0">
              <li v-for="item in borrow" :key="item.instanceId" @click="handleJump('DBJY', item)">
                {{ item.instanceName }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>
        <el-card v-if="item == 'DBGD'">
          <div class="tip">
            <img src="@/assets/images/a-32-guidangshenpi.png" class="tip_icon" />
            <p>归档待办</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="guidang" style="padding-left: 1%;" v-if="guidang.length > 0">
              <li v-for="item in guidang" :key="item.instanceId" @click="handleJump('DBGD', item)">
                {{ item.instanceName }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>
        <el-card v-if="item == 'MRJYL'">
          <div class="tip">
            <img src="@/assets/images/card-tip5.png" class="tip_icon" />
            <p>每日借阅量</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="symrjylData.length > 0">
            <div id="dailyBorrow" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'KCTJ'">
          <div class="tip">
            <img src="@/assets/images/card-tip4.png" class="tip_icon" />
            <p>库存统计</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="symenleiData.length > 0">
            <div id="inventory" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'MRFWL'">
          <div class="tip">
            <img src="@/assets/images/card-tip6.png" class="tip_icon" />
            <p>每日访问量</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="syfwlData.length > 0">
            <div id="dailyAccess" style="width: 90%; height:100%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'CPXX'">
          <div class="tip">
            <img src="@/assets/images/a-32-cipanxinxi-org.png" class="tip_icon" />
            <p>磁盘信息</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <div id="cpxx" style="width: 100%; height:90%;">
              <el-table :data="CPXXData" height="200" border>
                <el-table-column prop="dirName" label="盘符路径">
                </el-table-column>
                <el-table-column prop="sysTypeName" label="文件系统">
                </el-table-column>
                <el-table-column prop="total" label="总大小">
                </el-table-column>
                <el-table-column prop="free" label="可用大小">
                </el-table-column>
                <el-table-column prop="used" label="已用大小">
                </el-table-column>
                <el-table-column prop='usage' label="已用百分比" width="100px">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>

      </div>
    </div>
    <div class="second" :style="firstStyle">
      <div v-for="item in secondList" :key="item" :style="style">
        <el-card v-if="item == 'YGDLB'">
          <div class="tip">
            <img src="@/assets/images/a-32-guidangshenpi.png" class="tip_icon" />
            <p>预归档待办</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="guidang" style="padding-left: 1%;" v-if="guidang.length > 0">
              <li v-for="item in yuguidangList" :key="item.instanceId" @click="handleJump('YGDLB', item)">
                {{ item.instanceName }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>
        <el-card v-if="item == 'WDJY'">
          <div class="tip">
            <img src="@/assets/images/card-tip4.png" class="tip_icon" />
            <p>我的借阅</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="sywdjyData.length > 0">
            <div id="myBorrow1" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'WDSPJD'">
          <div class="tip">
            <img src="@/assets/images/card-tip5.png" class="tip_icon" />
            <p>我的审批进度</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="getProcessCountData.length > 0">
            <div id="myApproval1" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'GLDAGDQKDB'">
          <div class="tip">
            <img src="@/assets/images/card-tip6.png" class="tip_icon" />
            <p>各类档案归档情况对比(年)</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="sygdqkData.length > 0">
            <div id="fileArchiving1" style="width: 100%;height:100%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'TZGG'">
          <div class="tip">
            <img src="@/assets/images/card-tip3.png" class="tip_icon" />
            <p>通知公告</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="notice" style="padding-left: 1%;" v-if="notice.length > 0">
              <li v-for="item in notice" :key="item.noticeId" @click="handleJump('TZGG', item)">
                {{ item.title }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>
        <el-card v-if="item == 'DBJY'">
          <div class="tip">
            <img src="@/assets/images/a-32-jieyuedaiban.png" class="tip_icon" />
            <p>借阅待办</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="notice" style="padding-left: 1%;" v-if="borrow.length > 0">
              <li v-for="item in borrow" :key="item.instanceId" @click="handleJump('DBJY', item)">
                {{ item.instanceName }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>
        <el-card v-if="item == 'DBGD'">
          <div class="tip">
            <img src="@/assets/images/a-32-guidangshenpi.png" class="tip_icon" />
            <p>归档待办</p>
            <img style="float: right; padding-top: 2%" src="@/assets/images/more.png" @click="handleClick(item)" />
            <p :style="morestyle" @click="handleClick(item)">更多</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <ul class="notice" style="padding-left: 1%;" v-if="guidang.length > 0">
              <li v-for="item in guidang" :key="item.instanceId" @click="handleJump('DBGD', item)">
                {{ item.instanceName }}
              </li>
            </ul>
            <ul v-else>
              <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
            </ul>
          </div>
        </el-card>

        <el-card v-if="item == 'MRJYL'">
          <div class="tip">
            <img src="@/assets/images/card-tip5.png" class="tip_icon" />
            <p>每日借阅量</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="symrjylData.length > 0">
            <div id="dailyBorrow1" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'KCTJ'">
          <div class="tip">
            <img src="@/assets/images/card-tip4.png" class="tip_icon" />
            <p>库存统计</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="symenleiData.length > 0">
            <div id="inventory1" style="width: 90%; height:90%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'MRFWL'">
          <div class="tip">
            <img src="@/assets/images/card-tip6.png" class="tip_icon" />
            <p>每日访问量</p>
          </div>
          <div class="bottom" :style="bottomStyle" v-if="syfwlData.length > 0">
            <div id="dailyAccess1" style="width:100%; height:100%;"></div>
          </div>
          <ul v-else>
            <li style="margin-top: 10px; font-size: 16px;">暂无数据</li>
          </ul>
        </el-card>
        <el-card v-if="item == 'CPXX'">
          <div class="tip">
            <img src="@/assets/images/a-32-cipanxinxi-org.png" class="tip_icon" />
            <p>磁盘信息</p>
          </div>
          <div class="bottom" :style="bottomStyle">
            <div id="cpxx" style="width: 100%; height:90%;">
              <el-table :data="CPXXData" height="200" border>
                <el-table-column prop="dirName" label="盘符路径">
                </el-table-column>
                <el-table-column prop="sysTypeName" label="文件系统">
                </el-table-column>
                <el-table-column prop="total" label="总大小">
                </el-table-column>
                <el-table-column prop="free" label="可用大小">
                </el-table-column>
                <el-table-column prop="used" label="已用大小">
                </el-table-column>
                <el-table-column prop='usage' label="已用百分比" width="100px">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/lib/chart/pie') // echarts theme
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { getRouters } from "@/api/menu.js"
import {
  noticeList,
  syfwl,
  sygdqk,
  symenlei,
  symrjyl,
  sywdjy,
  borrowList,
  guidangList,
  yTaskList,
  getProcessCount, getDicts_archive, monitorserver
} from "@/api/homePage";
export default {
  name: "infoConfiguration",
  props: ['source'],
  data() {
    return {
      dataList: [],
      // 第一行div盒子
      firstList: [],
      // 第二行div盒子
      secondList: [],
      style: '',
      morestyle: '',
      // 通知公告
      notice: [],
      // 待办借阅
      borrow: [],
      // 待办归档
      guidang: [],
      //预归档列表
      yuguidangList: [],
      // 中铁和集中式样式修改
      firstStyle: '', // div盒子first和second的样式
      bottomStyle: '', // div盒子bottom的样式
      addressOption: [],
      routeList: [],
      CPXXData: [],
      sygdqkData: [],
      symenleiData: [],
      syfwlData: [],
      symrjylData: [],
      sywdjyData: [],
      getProcessCountData: []
    }
  },
  mounted() {
    getRouters().then(res => {
      this.routeList = res.data
    })
  },
  methods: {
    init(val) {
      // 中铁
      if (this.source == '1') {
        this.firstStyle = 'height: 25.4vh'
        this.bottomStyle = 'height: 17vh;'
      } else {
        this.bottomStyle = 'height: 20vh;'
      }
      getDicts_archive('JUMP_ADDRESS').then(response => {
        this.addressOption = response.data
      })
      this.dataList = val
      if (this.dataList.length > 4) {
        this.style = 'width:100%;margin:0 0.8vh'
        this.morestyle = 'float: right; margin-right: 1%;cursor: pointer;'
        // 截取前三个字符串
        this.firstList = this.dataList.slice(0, 3);
        // 包含剩余的字符串
        this.secondList = [...this.dataList.slice(3)];
      } else {
        this.style = 'width: 100%; margin:0 0.8vh;'
        this.morestyle = 'float: right; margin-right: 1%;cursor: pointer;'
        // 截取前两个字符串
        this.firstList = this.dataList.slice(0, 2);
        // 包含剩余的字符串
        this.secondList = [...this.dataList.slice(2)];
      }
      for (let i = 0; i < this.dataList.length; i++) {
        switch (this.dataList[i]) {
          case 'WDJY':
            this.getMyBorrow();
            break;
          case 'WDSPJD':
            this.getApprovalProgress();
            break;
          case 'GLDAGDQKDB':
            this.getFileArchiving();
            break;
          case 'TZGG':
            this.getNotice();
            break;
          case 'DBJY':
            this.getBorrow();
            break;
          case 'DBGD':
            this.getGuiDang();
            break;
          case 'MRJYL':
            this.getDailyBorrow();
            break;
          case 'KCTJ':
            this.getInventoryStatistics();
            break;
          case 'YGDLB':
            this.getyuguidangList();
            break;
          case 'MRFWL':
            this.getDailyAccess();
            break;
          case 'CPXX':
            this.monitorServerPOST();
            break;
          default:
            return '';
        }
      }
    },
    //磁盘信息
    monitorServerPOST() {
      monitorserver().then(response => {
        this.CPXXData = response.data.sysFiles;
        for (var i in response.data.sysFiles) {
          response.data.sysFiles[i].usage = response.data.sysFiles[i].usage + "%"
        }
      })
    },
    // 我的借阅
    getMyBorrow() {
      sywdjy().then(response => {
        const data = response.data;
        this.sywdjyData = response.data;
        var num = 0;
        for (var i in data) {
          num = num + parseInt(data[i].value)
        }
        var edata = data;
        this.$nextTick(() => {
          var myChart;
          if (this.firstList.includes('WDJY')) {
            myChart = echarts.init(document.getElementById('myBorrow'));
          } else {
            myChart = echarts.init(document.getElementById('myBorrow1'));
          }
          // 定义饼状图的数据和配置
          var option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            title: {
              text: num,
              subtext: '总量',
              x: '26%',
              y: 'center',
            },
            color: ['#636fd5', '#6c81b2', '#6797f5', '#68b383', '#f3c374', '#e5855b'],
            legend: {
              icon: "circle",
              orient: 'vertical',  //垂直显示
              y: 'center',    //延Y轴居中
              x: 'right', //居右显示
              padding: [0, 10, 0, 0,],
              data: edata,
              formatter: function (name) {
                var total = 0;
                var target;
                var value;
                for (let i = 0, l = edata.length; i < l; i++) {
                  value = edata[i].value;
                  total += edata[i].value;
                  if (edata[i].name == name) {
                    target = edata[i].value;
                  }
                }
                var arr = ["{a|" + name + "}", "{b|" + target + "}"];
                return arr.join("");
              },
              textStyle: {
                rich: {
                  a: {
                    color: "#333333",
                    align: "right",
                    fontSize: 14,
                    width: 25,
                    padding: [0, 0, 0, 0]
                  },
                  b: {
                    align: "left",
                    fontSize: 16,
                    width: 35,
                    padding: [0, 0, 0, 10],
                    color: " #333333"
                  }
                }
              }
            },
            series: [
              {
                label: { //去除饼图的指示折线
                  normal: {
                    show: false,
                    position: 'inside',
                    formatter: "{b}:{d}%"
                  },
                },
                //  hoverAnimation : true,
                silent: false,
                center: ["30%", "50%"],
                name: '统计',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                data: edata
              }
            ]
          };
          // 使用配置绘制饼状图
          myChart.setOption(option);
        });
      })
    },
    // 我的审批进度
    getApprovalProgress() {
      getProcessCount().then(response => {
        var data = response.data
        this.getProcessCountData = response.data;
        var leixings = ["product", "待办", "已办", "在办"]
        this.$nextTick(() => {
          var myChart;
          if (this.firstList.includes('WDSPJD')) {
            myChart = echarts.init(document.getElementById('myApproval'));
          } else {
            myChart = echarts.init(document.getElementById('myApproval1'));
          }
          // 指定图表的配置项和数据
          var option = {
            legend: {},
            tooltip: {
            },
            dataset: {
              dimensions: leixings,
              source: data,
            },
            grid: {
              containLabel: true,
              top: 50,
              x: 45,
              x2: 30,
              y2: 0
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              axisLabel: {
                interval: 0,//横轴信息全部显示
                rotate: -15,//-15度角倾斜显示
              },
            },
            yAxis: {},
            series: [
              { type: 'bar', barWidth: 20 },
              { type: 'bar', barWidth: 20 },
              { type: 'bar', barWidth: 20 }
            ],
            color: ['#80b3ff', '#ffb366', '#6666ff', '#ff6600', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
          };
          // 使用配置绘制饼状图
          myChart.setOption(option);
        })
      })
    },
    // 各类档案归档情况对比(年)
    getFileArchiving() {
      sygdqk().then(response => {
        this.sygdqkData = response.data.data;
        const data = response.data.data;
        const years = response.data.years;

        this.$nextTick(() => {
          var myChart;
          if (this.firstList.includes('GLDAGDQKDB')) {
            myChart = echarts.init(document.getElementById('fileArchiving'));
          } else {
            myChart = echarts.init(document.getElementById('fileArchiving1'));
          }
          // 指定图表的配置项和数据
          var option = {
            legend: {
              // top: 50,
              //       bottom: 20,
              //       textStyle: { // 标题样式  
              //           color: '#1cacd3', // 标题颜色  
              //       }
            },
            tooltip: {
            },
            dataset: {
              dimensions: years,
              source: data,
            },
            grid: {
              containLabel: true,
              top: 25,
              x: 18,
              x2: 10,
              y2: 0,
              height: '90%' // 你可以根据需要调整这个值
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              axisLabel: {
                interval: 0,//横轴信息全部显示
                rotate: -15,//-15度角倾斜显示
              },
            },
            yAxis: {},
            series: [
              { type: 'bar', barWidth: 20 },
              { type: 'bar', barWidth: 20 },
              { type: 'bar', barWidth: 20 },
              { type: 'bar', barWidth: 20 }
            ],
            color: ['#80b3ff', '#ffb366', '#6666ff', '#ff6600', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            dataZoom: [
              {
                type: 'slider', //滑动条
                show: true,      //开启
                xAxisIndex: [0],
                left: '6%',
                bottom: '6%',
                start: 1,
                end: 120,
                height: '6%'
              },
              {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 50
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      })
    },
    // 通知公告
    getNotice() {
      noticeList().then(response => {
        this.notice = response.rows.map(item => {
          return {
            noticeId: item.noticeId,
            title: item.noticeTitle
          }
        })
      })
    },
    // 待办借阅
    getBorrow() {
      borrowList().then(response => {
        this.borrow = response.rows
      })
    },
    // 待办归档
    getGuiDang() {
      guidangList().then(response => {
        this.guidang = response.rows
      })
    },
    // 预归档列表
    getyuguidangList() {
      yTaskList().then(response => {
        this.yuguidangList = response.rows
      })
    },
    // 每日借阅量
    getDailyBorrow() {
      symrjyl().then(response => {
        var data = []
        var date = []
        this.symrjylData = response.data;
        response.data.forEach(item => {
          date.push(item.name);
          data.push(item.value);
        });
        this.$nextTick(() => {
          var myChart;
          if (this.firstList.includes('MRJYL')) {
            myChart = echarts.init(document.getElementById('dailyBorrow'));
          } else {
            myChart = echarts.init(document.getElementById('dailyBorrow1'));
          }
          // 指定图表的配置项和数据
          var option = {
            color: ['#3460c7'],
            grid: {
              top: "5%",
              height: "80%",
              width: "80%"
            },
            xAxis: {
              axisTick: {
                show: false
              },
              type: 'category',
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: '#cccccc',
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#666666'
                }
              },
              data: date
            },
            tooltip: {
              trigger: 'axis'
            },
            yAxis: {
              axisTick: {
                show: false
              },
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#cccccc',
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#666666'
                }
              },

            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#7a9ff0'
              }, {
                offset: 1,
                color: '#bdd8fc'
              }])
            },
            series: [{
              data: data,
              type: 'line',
              smooth: true,
              areaStyle: {}
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      })
    },
    // 库存统计
    getInventoryStatistics() {
      symenlei().then(response => {
        const data = response.data;
        this.symenleiData = response.data;
        var num = 0;
        for (var i in data) {
          num = num + parseInt(data[i].value)
        }
        var edata = data;
        this.$nextTick(() => {
          var myChart;
          if (this.firstList.includes('KCTJ')) {
            myChart = echarts.init(document.getElementById('inventory'));
          } else {
            myChart = echarts.init(document.getElementById('inventory1'));
          }
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)',

            },
            title: {
              text: num,
              subtext: '总量',
              x: '26%',
              y: 'center',
            },
            color: ['#636fd5', '#6c81b2', '#6797f5', '#68b383', '#f3c374', '#e5855b'],
            legend: {
              icon: "circle",
              orient: 'vertical',//设置图解在右边
              type: 'scroll',
              //y: 'center',    //延Y轴居中
              top: '5%',
              x: 'right', //居右显示
              padding: [0, 10, 0, 0,],
              width: "100%",
              data: edata,

              formatter: function (name) {
                var total = 0;
                var target;
                var value;
                for (let i = 0, l = edata.length; i < l; i++) {
                  value = edata[i].value;
                  total += edata[i].value;
                  if (edata[i].name == name) {
                    target = edata[i].value;
                  }
                }
                var showname;
                if (name.length >= 5) {
                  showname = name.slice(0, 4) + "..."
                } else {
                  showname = name;
                }
                var arr = ["{a|" + showname + "}", "{b|" + target + "}"];
                return arr.join("         ");
              },

              textStyle: {
                rich: {
                  a: {
                    color: "#333333",
                    align: "right",
                    fontSize: 14,
                    width: 65,
                    padding: [0, 0, 0, 0]
                  },
                  b: {
                    align: "left",
                    fontSize: 16,
                    width: 35,
                    padding: [0, 0, 0, 10],
                    color: " #333333"
                  }
                }
              },
              tooltip: {
                show: true
              }

            },

            series: [
              {
                label: { //去除饼图的指示折线
                  normal: {
                    show: false,
                    position: 'inside',
                    formatter: "{b}:{d}%"
                  },
                },
                //  hoverAnimation : true,
                silent: false,
                center: ["30%", "47%"],
                name: '统计',
                type: 'pie',
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,

                data: edata,
                top: "5%"
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.on('legendselectchanged', function (params) {
            // console.log(edata);
            var sum2 = 0;
            for (var i = 0; i < edata.length; i++) {
              if (params.selected[edata[i].name] == false) {

              } else {
                sum2 += parseInt(edata[i].value);
              }
            }
            option.title.text = sum2;
            myChart.setOption(option);
          })
          myChart.setOption(option);
        })
      })
    },
    // 每日访问量
    getDailyAccess() {
      syfwl().then(response => {
        this.syfwlData = response.data;
        var data = []
        var date = []
        response.data.forEach(item => {
          date.push(item.name);
          data.push(item.value);
        });
        this.$nextTick(() => {
          var myChart;
          if (this.firstList.includes('MRFWL')) {
            myChart = echarts.init(document.getElementById('dailyAccess'));
          } else {
            myChart = echarts.init(document.getElementById('dailyAccess1'));
          }
          var option = {
            grid: {
              top: "10%",
              height: "78%",
              width: "80%"
            },
            xAxis: {
              type: 'category',
              data: date,
              axisTick: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#666666'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#cccccc',
                }
              },
            },
            yAxis: {
              type: 'value',
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                },
              },
              axisLabel: {
                textStyle: {
                  color: '#666666'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#cccccc',
                }
              },
            },
            tooltip: {
              trigger: 'axis'
            },
            series: [{
              barWidth: 18,
              data: data,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#a0a9fc' },
                    { offset: 1, color: '#5e6bd2' }
                  ]
                )
              },
              type: 'bar'
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      })
    },

    // 点击事件
    handleClick(item) {

      console.log(item, this.addressOption, this.hasRoute("archiveBorrowTask"), "/archiveBorrow/jygl/archiveBorrowTask")


      if (item == 'TZGG') {
        // 跳转文件整理 有就跳转无就不跳转

        if (this.hasRoute("system/notice/index")) {
          this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'TZGG') != undefined ? this.addressOption.find(item => item.dictValue == 'TZGG').dictLabel : '/notice' });
        } else if (this.hasRoute("archive/archiveNotice/index")) {
          this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'TZGG') != undefined ? this.addressOption.find(item => item.dictValue == 'TZGG').dictLabel : '/notice' });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }

      } else if (item == 'DBJY') {
        // 跳转文件整理 有就跳转无就不跳转
        if (this.hasRoute("archive/archiveBorrow/archiveBorrowReceipt/notQrocessed/index")) {
          this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'DBJY') != undefined ? this.addressOption.find(item => item.dictValue == 'DBJY').dictLabel : '/archiveBorrow/jygl/archiveBorrowTask' });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }

      } else if (item == 'DBGD') {
        // 跳转文件整理 有就跳转无就不跳转
        if (this.hasRoute("archive/fileCollection/archiveApproval/notQrocessed/index")) {
          this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'DBGD') != undefined ? this.addressOption.find(item => item.dictValue == 'DBGD').dictLabel : '/fileCollection/archiveApproval/notQrocessed' });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }

      } else if (item == 'YGDLB') {

        // 跳转文件整理 有就跳转无就不跳转
        if (this.hasRoute("archive/fileCollection/preArchiving/notQrocessed/index")) {
          this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'YGDLB') != undefined ? this.addressOption.find(item => item.dictValue == 'YGDLB').dictLabel : '/fileCollection/preArchiving/notQrocessed' });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }

      }
    },

    hasRoute(path, routeList) {

      !routeList && (routeList = this.routeList, console.log('执行'))

      for (let i = 0; i < routeList.length; i++) {

        if (routeList[i].component == path) {
          console.log(routeList[i], routeList[i].path, path, "00000000000000000")
          return true
        }
        if (routeList[i].children) {

          let flag = this.hasRoute(path, routeList[i].children)

          if (flag) {
            return flag
          }
        }
      }

      return false
    },

    // 跳转
    handleJump(type, item) {
      console.log(type, item)
      if (type == 'TZGG') {
        if (this.hasRoute("archive/archiveNotice/index")) {
          this.$router.push({
            path: this.addressOption.find(item => item.dictValue == 'TZGG') != undefined ? this.addressOption.find(item => item.dictValue == 'TZGG').dictLabel : '/notice',
            query: {
              item: item
            },
          });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }
      } else if (type == 'DBJY') {
        if (this.hasRoute("archive/archiveBorrow/archiveBorrowReceipt/notQrocessed/index")) {
          this.$router.push({
            path: this.addressOption.find(item => item.dictValue == 'DBJY') != undefined ? this.addressOption.find(item => item.dictValue == 'DBJY').dictLabel : '/archiveBorrow/archiveBorrowTask',
            query: {
              item: item
            },
          });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }
      } else if (type == 'DBGD') {
        if (this.hasRoute("archive/fileCollection/archiveApproval/notQrocessed/index")) {
          this.$router.push({
            path: this.addressOption.find(item => item.dictValue == 'DBGD') != undefined ? this.addressOption.find(item => item.dictValue == 'DBGD').dictLabel : '/fileCollection/archiveApproval/notQrocessed',
            query: {
              item: item
            },
          });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }
      } else if (type == 'YGDLB') {
        if (this.hasRoute("archive/fileCollection/preArchiving/notQrocessed/index")) {
          this.$router.push({
            path: this.addressOption.find(item => item.dictValue == 'YGDLB') != undefined ? this.addressOption.find(item => item.dictValue == 'YGDLB').dictLabel : '/fileCollection/preArchiving/notQrocessed',
            query: {
              item: item
            },
          });
        } else {
          this.$message({
            message: '您还没开通权限哦',
            type: 'warning'
          });
        }

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;

  // height: 500px;
  .first {
    width: 100%;
    display: flex;
    margin-top: 1vh;
    justify-content: space-between;

    .el-card {
      height: 100%;
      width: 100%;
      margin: 0 auto;
    }
  }

  .second {
    margin-top: 1vh;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .el-card {
      height: 100%;
      width: 100%;
      margin: 0 auto;
    }
  }
}

.tip {
  width: 100%;
  height: 3.2vh;

  .tip_icon {
    float: left;
    width: 2.8vh;
    height: 2.8vh;
    margin-top: 0.2vh;
  }

  p {
    font-size: 1.7vh;
    font-weight: bold;
    margin: 0 0 0 10px;
    line-height: 3.2vh;
    float: left;
    display: inline-block;
  }
}

.bottom {
  //height: 20vh;
  float: bottom;

  ul {
    margin: 1vh 0;
  }

  li {
    margin-top: 0.6vh;
    font-size: 1.8vh;
  }

  .notice {
    height: 100%;
    overflow: auto;

    li::before {
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url("../../assets/images/table_list0.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center 3px;
      margin-right: 5px;
      line-height: 16px;
    }
  }

  .guidang {
    height: 100%;
    overflow: auto;

    li::before {
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url("../../assets/images/table_list1.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center 3px;
      margin-right: 5px;
      line-height: 16px;
    }
  }

  .borrow {
    height: 100%;
    overflow: auto;

    li::before {
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url("../../assets/images/table_list2.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center 3px;
      margin-right: 5px;
      line-height: 16px;
    }
  }
}

.el-table {
  font-size: 12px;
}



// @media (max-width: 1366px) and (max-height: 768px) {
//   /* 在1366x768分辨率下应用的样式 */
//   .box {
//     width: 100%;
//     height: 500px;
//     .first {
//       width: 100%;
//       display: flex;
//       justify-content: space-around;
//     }
//     .second {
//       margin-top: 5px;
//       width: 100%;
//       display: flex;
//     }
//   }
//   .tip{
//     width: 100%;
//     height: 32px;
//     img{
//       float: left;
//     }
//     p{
//       font-size: 16px;
//       font-weight: bold;
//       margin: 0 0 0 10px;
//       line-height: 32px;
//       float: left;
//       display: inline-block;
//     }
//   }
//   .bottom {
//     height: 200px;
//     float: bottom;
//     li {
//       margin-top: 10px;
//       font-size: 16px;
//     }
//     .notice {
//       height: 100%;
//       overflow: auto;
//       li::before {
//         content: "";
//         display: inline-block;
//         width: 15px;
//         height: 15px;
//         background-image: url("../../assets/images/table_list0.png");
//         background-repeat: no-repeat;
//         background-size: contain;
//         background-position: center 3px;
//         margin-right: 5px;
//         line-height: 16px;
//       }
//     }
//     .guidang {
//       height: 100%;
//       overflow: auto;
//       li::before {
//         content: "";
//         display: inline-block;
//         width: 15px;
//         height: 15px;
//         background-image: url("../../assets/images/table_list1.png");
//         background-repeat: no-repeat;
//         background-size: contain;
//         background-position: center 3px;
//         margin-right: 5px;
//         line-height: 16px;
//       }
//     }
//     .borrow {
//       height: 100%;
//       overflow: auto;
//       li::before {
//         content: "";
//         display: inline-block;
//         width: 15px;
//         height: 15px;
//         background-image: url("../../assets/images/table_list2.png");
//         background-repeat: no-repeat;
//         background-size: contain;
//         background-position: center 3px;
//         margin-right: 5px;
//         line-height: 16px;
//       }
//     }
//   }
// }</style>
